<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('考勤组排班制设置')" />
	<th:block th:include="include :: bootstrap-editable-css" />
	<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
			<form id="formId">
				<div class="select-list">
					<ul>
						<li>
							<label>日期：</label>
							<div class="col-sm-3">
								<div class="input-group date">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input name="scheduDate" class="form-control" readonly="readonly" placeholder="yyyy-MM" type="text" onchange="selectScheduClassListByDate()" th:value="${scheduDate}">
									<input name="groupId" type="hidden" th:value="${groupId}">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="btn-group-sm" id="toolbar" role="group">
					<a class="btn btn-warning" onclick="$.table.exportExcel()">
						<i class="fa fa-download"></i> 导出
					</a>
					<a class="btn btn-info" onclick="$.table.importExcel()">
						<i class="fa fa-upload"></i> 导入
					</a>
				</div>

				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table" style="table-layout: fixed;"></table>
				</div>
			</form>
			</div>
		</div>
	</div>

	 <!-- 导入区域 -->
	 <script id="importTpl" type="text/template">
		 <form enctype="multipart/form-data" class="mt20 mb10">
			 <div class="col-xs-offset-1">
				 <input type="file" id="file" name="file"/>
				 <!--<div class="mt10 pt5">
					 <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"></a>
				 </div>-->
				 <font color="red" class="pull-left mt10">
					 提示：仅允许导入“xls”或“xlsx”格式文件！
				 </font>
			 </div>
		 </form>
	 </script>
	
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-table-editable-js" />
	 <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "hr/groupSon";
        var datas = [[${@dict.getType('sys_normal_disable')}]];
        var classList = [[${classList}]];
        var groupId = [[${groupId}]];
        var scheduDate = $("input[name='scheduDate']").val();

		$("input[name='scheduDate']").datetimepicker({
			format: "yyyy-mm",
			startView: "year",
			minView: "year",//打开时显示的视图。0-'hour' 1-'day' 2-'month' 3-'year' 4-'decade'
			autoclose: true,
			initialDate: new Date()
		});

		function selectScheduClassListByDate(){
			let data = {};
			data['groupId'] = groupId;
			data['scheduDate'] = scheduDate;
			$.operate.post(prefix + "/scheduClassList", data);
		}

		$(function() {
			var options = {
				url: prefix + "/scheduClassList",
				createUrl: prefix + "/add",
				updateUrl: prefix + "/edit/{id}",
				removeUrl: prefix + "/remove",
				exportUrl: ctx + "hr/groupSon/export",
				importUrl: ctx + "hr/groupSon/importData",
				modalName: "考勤组排班",
				onEditableSave: onEditableSave,
				columns: [{
					checkbox: false
				},
					{
						field: 'id',
						title: '主键ID',
						visible: false
					},
					{
						field: 'empId',
						title: '员工ID',
						visible: false
					},
					{
						field: 'empName',
						title: '姓名',
						width: '80',
						align: "center"
					},
					{
						field: 'classId1',
						title: '1',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId2',
						title: '2',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId3',
						title: '3',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId4',
						title: '4',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId5',
						title: '5',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId6',
						title: '6',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId7',
						title: '7',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId8',
						title: '8',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId9',
						title: '9',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId10',
						title: '10',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId11',
						title: '11',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId12',
						title: '12',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId13',
						title: '13',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId14',
						title: '14',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId15',
						title: '15',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId16',
						title: '16',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId17',
						title: '17',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId18',
						title: '18',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId19',
						title: '19',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId20',
						title: '20',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId21',
						title: '21',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId22',
						title: '22',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId23',
						title: '23',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId24',
						title: '24',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId25',
						title: '25',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId26',
						title: '26',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId27',
						title: '27',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId28',
						title: '28',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId29',
						title: '29',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId30',
						title: '30',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						field: 'classId31',
						title: '31',
						width: '80',
						align: "center",
						editable : {
							type : 'select',
							title : '当天班次',
							emptytext: "休息",
							source: function () {
								var result = [];
								result.push({ value: "", text: "休息" });
								$.each(classList, function (key, value) {
									result.push({ value: value.id, text: value.name });
								});
								return result;
							}
						}
					},
					{
						title: '操作',
						align: 'center',
						width: '150',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
							// actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
							return actions.join('');
						}
					}]
			};
			$.table.init(options);
		});
        
        function onEditableSave (field, row, oldValue, $el) {
        	// alert("主键ID：" + row.id +"，字段名：" + field + "，当前值：" + row[field]  + "，旧值：" + oldValue);
        	let data = {};
			let id = "id";
			let fieldName = field;
			data[fieldName] = row[field];
			data[id] = row.id;
			data["scheduDate"] = row.scheduDate;
			$.operate.post(prefix + "/editOne", data);
        }
        
        /* 查询表格所有数据值 */
        function getData(){
        	var data = $("#" + table.options.id).bootstrapTable('getData');
            alert(JSON.stringify(data))
        }
        
        /* 查询表格选择行数据值 */
        function getSelections(){
        	var data = $("#" + table.options.id).bootstrapTable('getSelections');
        	alert(JSON.stringify(data))
        }


    </script>
</body>
</html>